<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .pt{
            border: 2px solid #d3dce6;
            border-radius: 3px;
            margin: 8px;
        }
        .pt:hover{
            position: relative;
            top:5px;
            /*设置元素阴影：X偏移 Y偏移 浓度(值越大越模糊) 范围 颜色*/
            box-shadow: 0 0 10px 1px #d3dce6;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style=" width: 100%;padding: 0; height: 150px;">
            <!--导航菜单开始-->
            <div style="background-color: black">
                <el-menu style="width: 100%;margin: 0 auto;height: 100px;"
                         :default-active="activeIndex"
                         class="el-menu-demo"
                         mode="horizontal"
                         @select="handleSelect"
                         background-color="black"
                         text-color="#fff"
                         active-text-color="#fff">
                    <a href=""><img src="imgs/logo.png"style="width: 40px;height: 40px;
                    float: left; margin-top:25px;margin-left: 320px;
                    vertical-align: middle" alt="YxMall商城官网"></a>
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>

                    <div style="float: right;position: relative;top: 30px;right: 500px">
                        <el-input placeholder="请输入商品信息" v-model="wd">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </div>

                    <a href=""style="text-decoration: none;color:white;float: right;position: relative;
                        margin-top:35px;right: 150px;line-height: 30px">全部商品</a>

                    <div style="float: right;position: relative;top:25px">

                        <a href=""><img src="imgs/1.jpg"  alt=""></a>
                        <a href=""><img src="imgs/2.jpg"  alt=""></a>
                    </div>
                </el-menu>
            </div>
            <!--导航菜单结束-->
            <div class="d_img" style="float:left;z-index:10;background-color: rgb(247,247,247);height:70px;width: 100%;">
                <el-breadcrumb separator="/" style="margin-top: 30px;margin-left: 300px">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>


        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <el-row gutter="20">
                <el-col span="12">
                    <el-card>
                        <el-row>
                            <el-col span="4">
                                <div class="pt" style="top: 10px">
                                    <a href="javascript:void (0)"><img src="imgs/手机1.jpg" width="100%" alt=""> </a>
                                </div>
                                <div class="pt" style="top: 10px">
                                    <a href="javascript:void (0)"><img src="imgs/手机2.jpg" width="100%" alt=""> </a>
                                </div>
                                <div class="pt" style="top: 10px">
                                    <a href="javascript:void (0)"><img src="imgs/手机3.jpg" width="100%" alt=""> </a>
                                </div>
                                <div class="pt" style="top: 10px">
                                    <a href="javascript:void (0)"><img src="imgs/手机4.jpg" width="100%" alt=""> </a>
                                </div>

                            </el-col>

                            <el-col span="20" >
                                <img :src="p.url" width="100%" alt="">
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <el-col span="12">
                    <p style="font-size: 25px">
                        {{p.title}}
                    </p>
                    <el-divider></el-divider>
                    <p style="font-size: 15px;color: #666">
                        销量:{{p.saleCount}} 浏览量:{{p.viewCount}}
                    </p>
                    <p style="font-size: 25px;font-weight: bold">
                        ￥{{p.price}}
                        <span style="font-size: 15px;color: #666">原价:<s>{{p.oldPrice}}</s></span>
                    </p>
                    <template>
                        <el-input-number v-model="order.num" :min="1" :max="10" label="描述文字">
                        </el-input-number>
                    </template>
                    <div style="position: relative;top: 10px">
                        <el-button type="primary" @click="addOrder()">加入购物车</el-button>
                        <el-button @click="addOrderNow()">现在购买</el-button>
                    </div>

                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-card>
                    <span style="">产品信息</span>
                <img :src="p.content" width="1200px" alt="">
            </el-card>
        </el-main>
        <el-footer>
            <div style="height: 95px;background-image: url('imgs/wave.png')">
            </div>
            <div style="background-color: #3f3f3f;padding:30px 0;text-align: center;color: #b1b1b1">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
                </p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                activeIndex:'',
                wd:"",
                categoryArr: [],
                p:[],
                order:{
                    productId:"",
                    title:"",
                    price:"",
                    num:1,
                }
            }
        },
       methods: {
           handleSelect(key, keyPath) {
           },
           addOrder(){
               v.order.productId=v.p.id;
               v.order.title=v.p.title;
               v.order.url = v.p.url;
               v.order.price=v.p.price;
               axios.post("/order/addOrder",v.order).then(function (response) {
               });
               this.$message.success("添加购物车成功!");
               v.order.num=1;
           },
           addOrderNow(){

           },
       },
       created:function () {
           //发请求按地址栏中的id获取商品的详细信息
           axios.post("/product/selectById/detail"+location.search).then(function (response) {
               v.p=response.data;
           });
           let cid = location.search.split("=")[1];
           v.activeIndex=cid;
       }
   })
</script>
</html>
